<template>
  <view class="coupon">
    <view class="tab_nav">
      <view class="navTitle" v-for="(item,index) in navList" :key="index">
        <view :class="{'active':current === index}" @click="checked(index)">
          {{item.title}}
        </view>
      </view>
   </view>
   <view class="nav_item" v-if="current==0">
	   <view class="quan">
	   	<view class="quanzuo">
	   		<view class="money">
	   			8.72
	   		</view>
			<view class="money1">
				满99元可用
			</view>
	   	</view>
		<view class="quanyou">
			<view class="you1">
				满100元减1-10元
			</view>
			<view class="you2">
				2023-03-17至2023-03-24
			</view>
			<button class="btn">立即使用</button>
		</view>
	   </view>
    
    </view>
    <!-- <view class="nav_item" v-if="current==1">
      1
    </view>
    <view class="nav_item" v-if="current==2">
      2
    </view> -->
  </view>
</template>
<script>
  export default {
    data() {
      return {
        current: 0,
        navList: [{
          index: 0,
          title: '未使用'
        }, {
          index: 1,
          title: "已使用"
        }, {
          index: 2,
          title: "已过期"
        }]
      }
    },
    methods: {
      checked(index) {
        this.current = index
      },
    }
  }
</script>
<style lang="scss" scoped>
	.coupon{
		background-color: #ccc;
		.tab_nav {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  background-color: #fff;
		  height: 87rpx;
		  padding: 20rpx;
		}
		 
		.tab_nav .navTitle {
		  height: 87rpx;
		  line-height: 90rpx;
		  width: 100%;
		  text-align: center;
		  font-size: 32rpx;
		  color: #333;
		}
		 
		.active {
		  position: relative;
		  color: #1BA784;
		}
		 
		.active::after {
		  content: "";
		  position: absolute;
		  width: 100rpx;
		  height: 4rpx;
		  background-color: #1BA784;
		  left: 0px;
		  right: 0px;
		  bottom: 0px;
		  margin: auto;
		}
		.nav_item{
			margin-top: 20rpx;
			background-color: #ccc;
			height: 400rpx;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			.quan{
				width: 100%;
				height: 209rpx;
				.quanzuo{
					border-radius: 20rpx 0 0 20rpx;
					width: 234rpx;
					height: 100%;
					float: left;
					background: linear-gradient(300deg, rgb(250, 122, 122), rgb(254, 49, 78));
					box-sizing: border-box;
					padding: 40rpx 30rpx;
					.money{
						width: 100%;
						font-size: 60rpx;
						color: #fff;
					}
					.money::after{
						content: "元";
						color: #fff;
						font-size: 24rpx;
					}
					.money1{
						font-size: 24rpx;
						color: #fff;
					}
				}
				.quanyou{
					background-color: #fff;
					width: 455rpx;
					height: 100%;
					float: left;
					box-sizing: border-box;
					padding: 60rpx 10rpx;
					position: relative;
					.you1{
						font-size: 32rpx;
						color: #323233;
					}
					.you2{
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #969799;
					}
					.btn{
						width: 122rpx;
						height: 47rpx;
						position: absolute;
						right: 0;
						top: 60rpx;
						color: #EE0A24;
						outline: none;
						box-sizing: border-box;
						border: 1px soild #EE0A24;
						// border: #EE0A24;
						border-radius: 10rpx;
						background-color: #fff;
					}
				}
			}
		}
	}
  
  
</style>

